<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>api-struct</title>
		<link rel="shortcut icon" href="./image/favicon.png">
		<link rel="stylesheet" href="global.css">
		<link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/gruvbox-dark.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
		<script src="https://cdn.bootcss.com/viz.js/1.8.0/viz-lite.js"></script>
		<script src="../dist/directive.bundle.js"></script>
		<script src="../dist/layout.bundle.js"></script>
		<script src="../dist/component.bundle.js"></script>
</head>
<body>
	<div id="app">
		<struct>
			<!--头部-->
			<struct-header slot="header">
				<!--logo-->
				<div style="float:left;margin-left:30px;">
					<img src="./image/api.png" slot="logo" alt="">
				</div>
				
				
				<!--顶部链接-->
				<div style="float:right;padding-right:100px;line-height:72px;">
					<struct-nav slot="nav" :links="nav">
					</struct-nav>
					&nbsp;
					<a href="https://github.com/Zhang-Zhen-Yang/api-editor" target="_blank">
						<svg style="vertical-align:-5px;" aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
					</a>
				</div>
							
			</struct-header>
			
			<!--边栏-->
			<struct-aside 
			slot="aside" 
			:links="aside" 
			:init-active="[0,0]" 
			:expandable="true" 
			:css="{
				position:'fixed',
				left:0,
				top:'72px',
				width:'300px',
				padding:'20px 20px 0 30px',
				overflow:'auto',
				height:'calc(100% - 72px)',
			}">
				<img src="https://gw.alicdn.com/tfs/TB1pTBZQFXXXXX9XXXXXXXXXXXX-794-280.png" slot="content" alt="" style="width:80%;display:block;margin:0 auto;">
			</struct-aside>	
			
			<!--内容区-->
			<!--<iframe src="" slot="article" name="remote" frameborder="0" style="position:fixed;width:100%;height:calc(100% - 72px);" ></iframe>-->
			<struct-remote slot="article" :init="'./graphviz-docs/md.md.html'" >
				<div>
					<img src="./image/api.png" alt="" style="vertical-align:-15px;">
					<span style="font-size:16px">
						Copyright © 2017 <a href="javascript:void(0)" style="color:#088bc3;text-decoration:none;"> www.xxx.net</a> All Rights Reserved
					</span>					
				</div>
			</struct-remote>

			<!--回到顶部-->
			<struct-scrolltop slot="scrolltop" :target="'remote'">			
			</struct-scrolltop>
		</struct>
	</div>

	<script>
		function tt(){
			alert('tt');
		}
		var vm = new Vue({
			el: '#app',
			data: {
				aside:[
					{name:'Graphviz简介',url:'./graphviz-docs/md.md.html',target:'remote'},
					{
						name:'入门',
						expanded:true,
						target:'remote',
						children:[
							{
								name:'基础',
								target:'remote',
								url:'./graphviz-docs/base.md.html'},
							{
								name:'基础2',
								target:'remote',
								url:'./graphviz-docs/base2.md.html'},
						]
					},
					{
						name:'知识点',
						expanded:true,
						target:'remote',
						children:[
							{
								name:'node节点',
								target:'remote',
								url:'./graphviz-docs/node.md.html'},
							{
								name:'node节点样式',
								target:'remote',
								url:'./graphviz-docs/nodeStyle.md.html'},
							{
								name:'edge',
								target:'remote',
								url:'./graphviz-docs/edge.md.html'},
							{
								name:'箭头',
								target:'remote',
								url:'./graphviz-docs/arrow.md.html'},
							{
								name:'图片',
								target:'remote',
								url:'./graphviz-docs/image.md.html'},
						]
					},
					{
						name:'图示',
						expanded:true,
						target:'remote',
						children:[
							{
								name:'状态图',
								target:'remote',
								url:'./graphviz-docs/statusGraph.md.html'
							},
							{
								name:'生命周期图',
								target:'remote',
								url:'./graphviz-docs/OSGi.md.html'
							},
							{
								name:'uml类图',
								target:'remote',
								url:'./graphviz-docs/uml.md.html'
							},
							{
								name:'时序图',
								target:'remote',
								url:'./graphviz-docs/time.md.html'
							},
							{
								name:'其他',
								target:'remote',
								url:'./graphviz-docs/others.md.html'
							},
						]
					},
					{
						name:'测试',
						expanded:true,
						target:'remote',
						url:'./graphviz-docs/test.md.html'
					},			
				],
				nav:[
					{name:'教程',url:'./index.html',target:'_self'},
					{name:'手册',url:'https://www.bilibili.com/',target:'_blank'},
					{name:'Graphviz',url:'./api-struct-graphviz.html',target:'_self'},
					{name:'工具',url:'https://www.bilibili.com/',target:'_blank'},
				]
			}
		})		
	</script>
</body>
</html>